@import "../../font/iconfont.css";
@import "../scss/mixin";

/** 边框颜色 */
$selector-border-color: #d9d9d9 !default;
/** 图片颜色 */
$selector-icon-color: #999999 !default;


.lib-component__selector-label {
	width: 120px;
	margin-right: 10px;
	height: 30px;
	line-height: 30px;
	@include ell();
}

.lib-component__selector {
	display: flex;
	align-items: start;
	padding: 8px 0;


	.lib-component__selector-content {
		flex: 1;

		.selector-box {
			border: 1px solid $selector-border-color;
			border-radius: 3px;
			height: 30px;
			display: flex;
			align-items: center;
			position: relative;
		}

		.input-box {

			.input {
				flex: 1;
				margin: 4px 11px;
			}

			.iconfont {
				margin-right: 5px;
				font-size: 16px;
			}

			.icon-eye {
				font-size: 18px;
				color: $selector-icon-color;
			}

			.icon-close {
				font-size: 14px;
				color: $selector-icon-color;
				cursor: pointer;
			}
		}

		.textarea-box {
			padding: 4px 11px;
			height: auto;

			.textarea {
				flex: 1;
				height: 86px;
			}
		}

		.picker-box {

			.picker {
				flex: 1;
			}

			.picker-placeholder {
				color: #999999;
				padding: 4px 11px;
				@include ell();
			}

			.picker-label {
				padding: 4px 11px;
				@include ell();
			}
		}

		.select-box {

			.select-label {
				padding: 0 11px;
				flex: 1;
				.select-label-value {
					@include ells(1);
				}
				.select-placeholder {
					color: #999999;
					@include ell();
				}
			}

			.menu-down {
				color: $selector-icon-color;
				font-size: 18px;
				margin-right: 5px;
			}
		}
	}

	.lib-component__selector--mask {
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		z-index: 2;
		background-color: rgba(0, 0, 0, 0.00);
	}

	.lib-component__selector--options {
		position: absolute;
		background-color: #FFFFFF;
		width: 100%;
		z-index: 3;
		border-radius: 3px;
		overflow: hidden;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		left: 0;

		&.top {
			top: calc(100% + 2px);
		}

		&.bottom {
			bottom: calc(100% + 2px);
		}

		.opt {
			padding: 0 11px;
			height: 35px;
			line-height: 35px;
			user-select: none;
			cursor: pointer;
			&:hover {
				background-color: #f9f9f9;
			}
			@include ell();
			&.disabled {
				color: #cccccc;
				cursor: no-drop;
			}
		}
	}
}